/*
  @author Sam Heutmaker [samheutmaker@gmail.com]
*/

.RegistryListLegend {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 3px 3px 0px 0px;
    padding: 0 10px;
    flex: 1;

    span {
        flex: 1;
        font-weight: 600;
        color: #FFFFFF;
        font-size: 0.75rem;
    }

    span.AddCred {
        @extend .Clickable;
        font-weight: 900;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
}

.AddEditRegistryLegend {
    @extend .RegistryListLegend;
    background-color: $salmon;

    span {
        color: white;
        font-weight: 600;
        padding: 0 10px;
    }

    span.Close {
        position: absolute;
        right: 0px;
        top: 12px;


        i.icon-dis-close {
            color: white;
            font-size: 1.2rem;

            &:hover {
                cursor: pointer;
            }
        }
    }
}

.AddEditRegistryCreds.Edit {
    font-size: 0.875rem;
    color: $black;
    align-items: center;
}

.AddEditRegistryCreds {
    display: flex;
    flex-direction: row;

    .Flex1 {
        padding: 0 6px;
    }
}

.RegistryList {
    border-radius: 3px;

    .RegistryItem {
        border-bottom: solid 1px $border-color;
        padding: 5px 10px;
        transition: all 0.3s;

        &:nth-of-type(2n - 1) {
            background-color: $light-grey;

            // &:hover {
            //     background-color: lighten($light-grey, 2%);
            // }
        }

        &:nth-of-type(2n) {
            background-color: $dark-grey;

            // &:hover {
            //     background-color: lighten($dark-grey, 2%);
            // }
        }

        .Inside {
            align-items: center;

            .ProviderIcon {
                height: 28px;
                width: 28px;
                border: 0px;
                outline: 0px;
                margin-right: 11px;
            }

            span.ListValue {
                font-weight: 400;
                font-size: 0.75rem;
                color: $black;
                flex: 1;
                display: flex;
                flex-direction: row;
                align-items: center;
            }

            .Actions {
                flex: 1;
                display: flex;
                justify-content: flex-end;

                i {
                    color: $light-blue;
                    margin: 0px 7px;
                    transition: all 0.3s;

                    &:hover {
                        cursor: pointer;
                        color: darken($light-blue, 15%);
                    }
                }
            }
        }
    }
}